<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <!--这里是员工和管理员界面-->
    <title>快递之家管理系统</title>
</head>
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="/static/layui/layui/css/layui.css">
<body class="layui-layout-body">

<form class="layui-form" id="kdgl" style="display:none">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="hidden" name="kid">
            <input type="hidden" name="kno">
            <input type="text" name="kn" required  lay-verify="required" placeholder="请输入姓名" autocomplete="on" class="layui-input" id="eidt_username" style="width:100px">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
            <input type="password" name="kpw" required lay-verify="required" placeholder="请输入密码" autocomplete="on" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" name="ksex" value="男" title="男">
            <input type="radio" name="ksex" value="女" title="女" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话号码</label>
        <div class="layui-input-block">
            <input type="text" name="ktelephone" required  lay-verify="required" placeholder="请输入电话号码" autocomplete="on" class="layui-input" id="eidt_phone" style="width:100px">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">常用住址</label>
        <div class="layui-input-block">
            <input type="text" name="kadress" required  lay-verify="required" placeholder="请输入住址" autocomplete="on" class="layui-input" id="eidt_adress" style="width:100px">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证</label>
        <div class="layui-input-block">
            <input type="text" name="kpid" required  lay-verify="required" placeholder="请输入身份证号码" autocomplete="on" class="layui-input" id="eidt_pid" style="width:100px">
        </div>
    </div>
    <div class="layui-form-item">
                <div class="layui-input-block">
                    <button lay-submit="" lay-filter="sub" class="layui-btn layui-btn-normal tijiao">提交</button>
                </div>
            </div> 
</form>

<div class="layui-body">
    <!-- 内容主体区域 -->
    <div>用户列表</div>
    <table id="kdglTable" lay-filter="kdglTable"></table>
    <div id="userInfoToolBar" style="display: none;">
        <button type="button" lay-event="save" class="layui-btn layui-btn-sm layui-btn-danger"><span class="layui-icon layui-icon-add-1"></span>添加</button>
        <button type="button" lay-event="batchDelete" class="layui-btn layui-btn-sm layui-btn-danger"><span class="layui-icon layui-icon-delete"></span>批量删除</button>
    </div>
    <div id="userInfoRowBar" style="display: none;">
        <button type="button" lay-event="update" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-edit">修改</span></button>
        <button type="button" lay-event="delete" class="layui-btn layui-btn-danger"><span class="layui-icon layui-icon-delete">删除</span></button>
    </div>
</div>
</body>
<script src="/static/layui/layui/layui.all.js"></script>
<script src="/static/jquery/jquery-3.4.0.js"></script>
<script>
    /*//JavaScript代码区域
    layui.use(['jquery','element','form','table','layer','laydate'], function(){
        var $ = layui.jquery;
        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        //第一个实例
        var tableIns = table.render({
            elem: '#kdglTable'
            , height: 'full-220'
            ,toolbar: '#userInfoToolBar' //开启头部工具栏，并为其绑定左侧模板
            ,url: '/kh/getAllKh' //数据接口
            ,page: true //开启分页
            ,cols: [ [
                ,{field: 'kid', title: 'ID', fixed: 'left'}
                ,{field: 'kno', title: '用户账号', align: 'center'}
                ,{field: 'kn', title: '用户名', align: 'center'}
                ,{field: 'kpw', title: '密码', align: 'center'}
                ,{field: 'ktelephone', title: '电话', align: 'center'}
                ,{field: 'ksex', title: '性别', align: 'center'}
                ,{field: 'kadress', title: '住址', align: 'center'}
                ,{field: 'kpid', title: '身份证号码', align: 'center'}
                ,{fixed: 'right', title: '操作', toolbar: '#userInfoRowBar'}
            ] ]
        });

        //监听工具条的事件
        table.on('toolbar(kdglTable)', function(obj){ //注：tool 是工具条事件名，kdglTable 是 table 原始容器的属性 lay-filter="对应的值"
            // var data = obj.data; //获得当前行数据
            // var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            // var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            switch (obj.event) {
                case 'batchDelete':
                    batchDelete();
                    break;
                case 'save':
                    save();
                    break;
            };
        });

        //监听行工具条的事件
        table.on('tool(kdglTable)', function(obj){ //注：tool 是工具条事件名，kdglTable 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            switch (obj.event) {
                case 'delete':
                    deleteInfo(data);
                    break;
                case 'update':
                    update(data);
                    break;
            };
        });

        //修改
        function update(data) {
            layer.open({
                type: 1 //Page层类型
                ,skin: 'layui-layer-molv'
                ,area: ['380px', '270px']
                ,title: ['修改用户','font-size:18px']
                ,btn: ['确定', '取消']
                ,shadeClose: true
                ,shade: 0 //遮罩透明度
                ,maxmin: true //允许全屏最小化
                ,content:$("#kdgl").html() //如果要form表单提交必须是$("#t") dom元素，不能是$("#kdgl").html()
                ,success:function(layero,index){
                    form.render();//动态渲染
                    form.verify();
                    form.on('submit(sub)', function(data){
                        $.ajax({
                            url:"/kh/update",
                            dataType:"json",   //返回格式为json
                            async:true,
                            data:data.field,    //参数值
                            type:"POST",   //请求方式
                            success:function(req){
                                //请求成功时处理
                                //console.log(req);
                                if(req.code === 0){
                                    layer.close(index);   // 关闭弹窗
                                    layer.msg('发送成功', {icon: 6});
                                }else{
                                    layer.msg('发送失败 '+req.msg, {icon: 5});
                                }
                            },
                            error:function(){
                                //请求出错处理
                                layer.msg('发送失败', {icon: 5});
                            }
                        });
                    });
                    /!*$('#kid').val(data.kid);
                    $('#kno').val(data.kno);
                    $('#kn').val(data.kn);
                    $('#kpw').val(data.kpw);
                    $('#ktelephone').val(data.ktelephone);
                    $('#ksex').val(data.ksex);
                    $('#kaddress').val(data.kaddress);
                    $('#kpid').val(data.kpid);
                },yes: function (index,layero) {
                    $.post('/kh/update',{
                        kid: data.kid,
                        kno: data.kno,
                        kn: $('#kn').val(),
                        kpw: data.kpw,
                        ktelephone: data.ktelephone,
                        ksex: data.ksex,
                        kadress: data.kadress,
                        kpid: data.kpid
                    },function (res) {
                        //根据后台返回的参数，来进行判断
                        if (res>0){
                            layer.alert('编辑成功',{icon:1,title:'提示'},function (i) {
                                layer.close(i);
                                layer.close(index); //关闭弹出层
                                $("#kdgl")[0].reset(); //重置form
                            })
                            table.reload('kdglTable',{ //重载表格
                                page:{
                                    curr:1
                                }
                            })
                        }
                    })*!/
                },
                yes: function(index, layero){
                    layero.find('.sub-btn').click();    // 这一句就是点击确认按钮触发form的隐藏提交
                }
            });
        }

        //修改
        function save() {

        }

        //删除
        function deleteInfo(data) {
            layer.confirm('是否确定删除这些数据？', {icon: 3, title:'提示'}, function(index){
                $.post("/kh/delete",{kid:data.kid},function (res) {
                    if (res.code==0){
                        tableIns.reload();
                    }
                    layer.msg(res.data);
                })
                layer.close(index);
            });
        }

        //批量删除
        function batchDelete(){
            //得到选中行
            var checkStatus = table.checkStatus('kdglTable');
            var data = checkStatus.data; //获取选中行数据
            var length = checkStatus.data.length;//获取选中行数量，可作为是否有选中行的条件
            if (length>0){
                layer.confirm('是否确定删除这些数据？', {icon: 3, title:'提示'}, function(index){
                    var ids = "";
                    $.each(data,function (index,item) {
                        if (index==0){
                            ids += "ids="+item.id;
                        }else {
                            ids += "&ids="+item.id;
                        }
                        alert(ids);
                    })
                    $.post("/kh/batchDelete",ids,function (res) {
                        if (res.code==0){
                            tableIns.reload();
                        }
                        layer.msg(res.data);
                    })
                    layer.close(index);
                });
            }else {
                layer.msg("请选中操作行");
            }
        }
    });*/
</script>
</html>